<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.tab{
			width: 600px;
			margin:  100px auto;
/*			background: pink;*/
		}
		.title span{
			float: left;
			width: 200px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			border: 1px solid #000;
			box-sizing: border-box;
		}
		.title .active{
			background: orange;
			color: #fff;
		}
		.content p{
			width: 600px;
			height: 200px;
			line-height: 200px;
			text-align: center;
			border: 1px solid #000;
			box-sizing: border-box;
			display: none;
		}
		.content .select{
			display: block;
		}
	</style>
</head>
<body>

	<div class="tab">
		<div class="title">
			<span class="active">标题1</span>
			<span>标题2</span>
			<span>标题3</span>
		</div>
		<div class="content">
			<p class="select">内容1</p>
			<p>内容2</p>
			<p>内容3</p>
		</div>
	</div>

<script type="text/javascript">
	let spans = document.querySelectorAll('span')
	let ps = document.querySelectorAll('p')
	for(var i = 0; i < spans.length; i++){
		spans[i].onclick = function(){
			document.querySelector('.active').className = ''
			document.querySelector('.select').className = ''
			this.className= 'active'
			ps[i].className = 'select'
		}
	}
</script>
</body>
</html>